{% extends 'layout.html' %}
{% block table-index %}nav-link{% endblock %}
{% block table-show %}show{% endblock %}
{% block table-index-ShowData %}active{% endblock %}
{% block body %}


 <main id="main" class="main">
    <div class="pagetitle">
      <h1>Data Tables</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Tables</li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->
    <section class="section">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Datatables</h5>
              <!-- Table with stripped rows -->
              <table class="table datatable">
                <thead>
                  <tr>
                    <th style="width">用户</th>
                    <th style="width">树种</th>
                    <th style="width">地区</th>
                    <th data-type="date" data-format="YYYY/DD/MM">记录时间</th>
                    <th>总碳库量（tc）</th>
                    <th style="width">详情</th>
                  </tr>
                </thead>
                <tbody>

                {% for item in Item_Unary %}
                  <tr>
                    <td>{{user.username}}</td>
                    <td>{{item.TreeType}}</td>
                    <td style="width:20%">{{item.ProvinceName}}--{{item.City}}{%if item.Pos %}--{{item.Pos}}{% endif %}</td>
                    <td>2024/10/19</td>
                    <td>{{item.total_carbon_storage_all}}</td>
                    <td style="width:50%">
                      <div class="icon">
                        <button class="bx bxs-bullseye btn btn-primary" onclick="toggleDetails(this)"></button>
                        <div class="details" style="display:none">
                          <p>基础数据</p>
                          <p>树径：{{item.Diameter}} 树高：{{item.Height}} 数量：{{item.Quantity}}</p>
                          <p>计算后：</p>
                          <p>干生物量:{{item.dry_biomass}} 总生物量：{{item.total_biomass}}</p>
                          <p>碳库量:{{item.carbon_storage}} 碳汇：{{item.carbon_sinks}}</p>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
              <!-- End Table with stripped rows -->
              <script>
                function toggleDetails(button) {
                    var details = button.nextElementSibling;
                    if (details.style.display === 'none' || details.style.display === '') {
                        details.style.display = 'block';
                    } else {
                        details.style.display = 'none';
                    }
                }
            </script>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main><!-- End #main -->



{% endblock %}